<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>


  <style>
    /*子孙后代选择器:只能一起选择本身和本身后面的层级,选不到中间的某一层级*/
/*    body div div p{
      color: #ff00f2;
    }*/
    /*子元素选择器:只能选中间的某一层级,不包括本层级*/
    body>di>div>p{
      color: red;
    }

  </style>
</head>
<body>
<p>p1</p>
<div><p>p2</p></div>
<div>
  <div><p>p3</p></div>
  <div>
    <div><p>p4</p></div>
  </div>
</div>
</body>
</html>